<template>
  <div>
    <h2>订单列表</h2>
    <ul>
      <li v-for="order in orders" :key="order.orderId">
        订单号: {{ order.orderId }}，总价: ￥{{ order.totalAmount }}，状态: {{ order.status }}
        <button @click="cancelOrder(order.orderId)" v-if="order.status === 'PENDING'">取消订单</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const orders = ref([])

async function fetchOrders() {
  const res = await axios.get('/api/v1/admin/orders', {
    headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
    params: { page: 1, pageSize: 20 }
  })
  if (res.data.code === 0) {
    orders.value = res.data.data.orders
  }
}

async function cancelOrder(orderId) {
  const res = await axios.post(`/api/v1/admin/orders/${orderId}/cancel`, {}, {
    headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
  })
  if (res.data.code === 0) {
    alert('取消成功')
    await fetchOrders()
  } else {
    alert(res.data.message || '取消失败')
  }
}

onMounted(fetchOrders)
</script>
